@import './window-variables'

::fullscreen
  overflow: hidden !important

::-ms-fullscreen
  overflow: hidden !important

::-webkit-full-screen
  overflow: hidden !important

::-moz-full-screen
  overflow: hidden !important

body
  overscroll-behavior-y: contain

.q-window
  color: currentColor

  &__touch-action
    touch-action: none

  &__dragging
    box-shadow: none

  &__floating
    box-shadow: $box-shadow

  &__fullscreen
    position: fixed !important
    top: 0 !important
    left: 0 !important
    width: 100vw !important
    height: 100vh !important

  &__titlebar
    top: 0
    left: 0
    flex: none
    display: flex
    flex-wrap: nowrap
    overflow: hidden
    padding: $titlebar-padding
    width: 100%
    box-sizing: border-box
    white-space: nowrap
    border-radius: 0

    &--divider
      border-width: 0 0 1px
      border-style: solid

    &--dense
      min-height: 16px!important
      font-size: .8rem!important

    &--title
      display: flex
      flex-wrap: nowrap
      flex: 1
      justify-content: left
      font-size: 1rem

    &--actions
      padding: 2px 4px

  &__body
    width: 100%
    overflow: hidden

  &__selected
    border-color: rgba(0,0,0,.2)
    box-shadow: $box-shadow

  &__resize
    &-handle
      position: absolute
      background-color: transparent
      border-color: transparent
      font-size: 0
      line-height: 6px
      opacity: 0
      zoom: 1

      &--top
        top: -3px
        left: 0
        width: 100%
        height: 6px
        user-drag: none
        &:hover
          cursor: n-resize

        &-left
          top: -3px
          left: -3px
          width: 6px
          height: 6px
          user-drag: none
          &:hover
            cursor: nw-resize

        &-right
          top: -3px
          right: -3px
          width: 6px
          height: 6px
          user-drag: none
          &:hover
            cursor: ne-resize

      &--right
        top: 0
        right: -3px
        width: 6px
        height: 100%
        user-drag: none
        &:hover
          cursor: e-resize

      &--bottom
        bottom: -3px
        left: 0
        width: 100%
        height: 6px
        user-drag: none
        &:hover
          cursor: s-resize

        &-left
          bottom: -3px
          left: -3px
          width: 6px
          height: 6px
          user-drag: none
          &:hover
            cursor: sw-resize

        &-right
          bottom: -3px
          right: -3px
          width: 6px
          height: 6px
          user-drag: none
          &:hover
            cursor: se-resize

      &--left
          top: 0
          left: -3px
          width: 6px
          height: 100%
          user-drag: none
          &:hover
            cursor: w-resize

      &--titlebar
        top: 0
        left: 0
        width: 100%
        height: 100%
        user-drag: none
        &:hover
          cursor: move

.gripper
  position: absolute
  width: $gripper-size
  height: $gripper-size
  background-color: $gripper-background-color
  border: $gripper-border
  user-drag: none

  &:hover
    background-color: $gripper-hover-background-color

  &-round
    border-radius: 50%

  &-top
    top: -($gripper-size)
    left: 50%
    margin-left: -($gripper-size)
    user-drag: none

    &:hover
      cursor: n-resize

    &-left
      top: -($gripper-size)
      left: -($gripper-size)
      user-drag: none

      &:hover
        cursor: nw-resize

    &-right
      top: -($gripper-size)
      right: -($gripper-size)
      user-drag: none

      &:hover
        cursor: ne-resize

  &-left
    left: -($gripper-size)
    top: 50%
    margin-top: -($gripper-size)
    user-drag: none

    &:hover
      cursor: w-resize

  &-right
    right: -($gripper-size)
    top: 50%
    margin-top: -($gripper-size)
    user-drag: none

    &:hover
      cursor: e-resize

  &-bottom
    bottom: -($gripper-size)
    left: 50%
    margin-left: -($gripper-size)
    user-drag: none

    &:hover
      cursor: s-resize

    &-left
      bottom: -($gripper-size)
      left: -($gripper-size)
      user-drag: none

      &:hover
        cursor: sw-resize

    &-right
      bottom: -($gripper-size)
      right: -($gripper-size)
      user-drag: none

      &:hover
        cursor: se-resize

.q-dark div,
.body--dark div,
.q-window--dark
  .gripper
    background-color: $gripper-background-color-dark
    border: $gripper-border-dark

    &:hover
      background-color: $gripper-hover-background-color-dark
